<template>
  <!-- 任务燃尽图1111111111111111111111 -->
  <div id="main4" style="width: 100%; height: 330px;margin-top: 10px;"></div>
</template>

<script lang="ts" setup>
import { onMounted, defineProps, ref, watch } from 'vue'
import * as echarts from 'echarts';

onMounted(() => {
  var chartDom = document.getElementById('main4');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    title: {
      text: '任务燃尽图'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['剩余', '已解决']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['10.1', '10.2', '10.3', '10.4', '10.5', '10.6', '10.7']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '剩余',
        type: 'line',
        // stack: 'Total',
        itemStyle: { color: "#ff4500" },
        data: [6, 5, 7, 4, 9, 4, 8]
      },
      {
        name: '已解决',
        type: 'line',
        // stack: 'Total',
        data: [1, 1, 5, 4, 3, 1, 4]
      }

    ]
  };

  option && myChart.setOption(option);
})

</script>

<style lang="scss" scoped></style>